<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="商品详情">
    <meta name="description" content="商品详情">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css"> -->
    <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox productpage hasmenu" id="app" v-if="loaded==true">
    <div class="product">
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in proData.images"><img :src="item" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="status wait" v-if="proData.ongoing_status=='coming_soon'">
                    <span><i v-if="showTime.dd!=0">{{showTime.dd}}天</i>{{showTime.hh}}小时{{showTime.mm}}分钟{{showTime.ss}}秒</span>
                    <span>待开抢</span>
                </div>
                <div class="status going" v-if="proData.ongoing_status=='on_sale'"><span>抢购中</span></div>
                <div class="status goend" v-if="proData.ongoing_status=='offline_soon'">
                    <span><i v-if="showTime.dd!=0">{{showTime.dd}}天</i>{{showTime.hh}}小时{{showTime.mm}}分钟{{showTime.ss}}秒</span>
                    <span>即将下架</span>
                </div>
                <div class="status" v-if="proData.ongoing_status=='expired'"><span>已下架</span></div>
            </div>
            <!-- <img :src="proData.images" alt=""> -->
            <div class="bannerbot">
                <div class="text">
                    <h5><em>￥</em>{{specsSelect.sale_price}}</h5>
                    <span>门市价：¥{{specsSelect.original_price}}</span>
                </div>
                <!-- <div class="ab">
                    <div class="bg"></div>
                    <div class="con">
                        <img src="images/search-ab.png" alt=""><span>返</span><span class="price"><em>￥</em>35-45</span>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="desc">
            <h3>{{proData.title}}</h3>
            <p>{{proData.intro}}</p>
            <p class="tongji"><span>已售：{{specsSelect.sales_units}}</span><span>库存：{{specsSelect.inventory_units}}</span>
            </p>
        </div>
        <div class="choose">
            <h3>选择套餐</h3>
            <div class="list">
                <div :class="['item',{'active': item.isSelected=='true'}]" v-for="item in proData.specs"
                     @click="changeSelect(item.id)">{{item.spec_name}}
                </div>
            </div>
        </div>
        <div class="other" v-if="specsSelect.description!=''">
            <div class="gz">
                <h3 class="tit">服务内容</h3>
                <p>{{specsSelect.description}}</p>
            </div>
        </div>
        <div class="other">
            <div class="gz" v-if="proData.other_instruction!='' || proData.other_instruction!=''">
                <h3 class="tit">规则说明</h3>
                <h4 v-if="is_deliver">
                    预计 <span>{{proData.order_limit}}</span> 天可到货,
                    <block v-if="proData.order_limit==0">本商品不限购</block>
                    <block v-else>每人最多购买 <span>{{proData.order_limit}}</span> 件</block>
                </h4>
                <h4 v-else>
                    <block v-if="proData.order_limit==0">本商品不限购,</block>
                    <block v-else>每人最多购买 <span>{{proData.order_limit}}</span> 件,</block>
                    <block v-if="proData.need_booking">需要提前<span>电话预约</span></block>
                    <block v-else>⽆需<span>电话预约</span></block>
                </h4>
                <p v-if="proData.other_instruction">{{proData.other_instruction}}</p>
            </div>
            <div class="stores" v-if="proData.stores">
                <h3 class="tit">适用门店</h3>
                <div class="text">
                    <div class="row" v-for="item in proData.stores">
                        <h4>{{item.name}}</h4>
                        <p>{{item.address}}</p>
                        <a :href="'tel:'+item.phone_no"><img src="images/order-phone.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="proshow" v-html="proData.description">
        </div>
        <div class="tuijian" v-if="tuijiandata.length>0">
            <h3><span>你可能会喜欢</span></h3>
            <div class="content">
                <a :href="'./product.html?id='+item.id" class="item" v-for="item in tuijiandata">
                    <div class="fl">
                        <div class="img"><img :src="item.image_url" alt=""></div>
                        <div class="text">
                            <h4>{{item.title}}</h4>
                            <div class="line">
                                <h5><em>￥</em>{{item.sale_price}}</h5>
                                <span>门市价：¥{{item.original_price}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="fr">
                        <div class="con">
                            <div class="btn">购买</div>
                            <p><span>已售：</span>{{item.sales_units}}</p>
                        </div>
                    </div>
                </a>
                <!-- <div class="item">
                    <div class="fl">
                        <div class="img"><img src="images/order-img.png" alt=""></div>
                        <div class="text">
                            <h4>好物优选 | 金龙鱼玉米油非转基因兜兜风4升</h4>
                            <div class="line">
                                <h5><em>￥</em>96.8</h5>
                                <span>门市价：¥160</span>
                            </div>
                        </div>
                    </div>
                    <div class="fr">
                        <div class="con">
                            <div class="btn">购买</div>
                            <p><span>已售：</span>1203</p>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <div class="probotmenu">
        <div class="fl">
            <a class="item" href="./index.html">
                <div class="img"><img src="images/product-bot-ico1.png" alt=""></div>
                <p>首页</p>
            </a>
            <!-- <div class="item">
                <div class="img"><img src="images/product-bot-ico2.png" alt=""></div>
                <p>分享</p>
            </div> -->
        </div>
        <div class="btn" @click="gobuy()"><h5><em>￥</em>{{specsSelect.sale_price}}</h5><span>立即抢购</span></div>
    </div>
    <div class="gologin pop">
        <div class="shadow"></div>
        <div class="wrap">
            <div class="text">
                <p>您还未登录，是否登录</p>
            </div>
            <div class="btnbox">
                <div class="btn" @click="closegologin">取消</div>
                <div class="btn confirm" @click="gologin">确定</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        pid: '',
        talent_id: '',
        proData: '',
        specsSelect: '',
        tuijiandata: '',
        showTime: {},
        getTime: null,
        loaded: false,
        is_deliver: false,
      }
    },
    mounted() {
      var that = this;
      that.pid = getUrlParam("id");
      if (getUrlParam("talent_id")) {
        that.talent_id = getUrlParam("talent_id");
      }
      that.getdata();
    },
    methods: {
      getTimeList() {
        var that = this;
        that.getTime = setInterval(function () {
          var arr = that.showTime;
          if (arr.time > 0) {
            arr.time -= 1000;
            var dd = Math.floor(arr.time / 1000 / 60 / 60 / 24);
            var hh = Math.floor((arr.time / 1000 / 60 / 60) % 24);
            var mm = Math.floor((arr.time / 1000 / 60) % 60);
            var ss = Math.floor((arr.time / 1000) % 60);
            /*if(0<=dd && dd<10){ dd='0'+dd }else */
            if (dd < 0) {
              dd = 0
            }
            /*if(0<=hh && hh<10){ hh='0'+hh }else */
            if (hh < 0) {
              hh = 0
            }
            /*if(0<=mm && mm<10){ mm='0'+mm }else */
            if (mm < 0) {
              mm = 0
            }
            /*if(0<=ss && ss<10){ ss='0'+ss }else */
            if (ss < 0) {
              ss = 0
            }
            arr["dd"] = dd;
            arr["hh"] = hh;
            arr["mm"] = mm;
            arr["ss"] = ss;
          } else {
            arr["dd"] = 0;
            arr["hh"] = 0;
            arr["mm"] = 0;
            arr["ss"] = 0;
            if (that.proData.ongoing_status == 'coming_soon') {
              that.proData.ongoing_status = 'on_sale'
            }
            if (that.proData.ongoing_status == 'offline_soon') {
              that.proData.ongoing_status = 'expired'
            }
          }
          that.showTime = arr;
        }, 1000);
      },
      getdata: function () {
        var that = this;
        var ready1 = false, ready2 = false;
        var load = setInterval(() => {
          if (ready1 == true && ready2 == true) {
            that.loaded = true;
            clearInterval(load);
            that.$nextTick(function () {
              var swiper1 = new Swiper('.banner .swiper-container', {
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
                watchOverflow: true,
                // autoHeight:true,
                autoplay: true,
                pagination: {
                  el: '.banner .swiper-pagination',
                  type: 'fraction',
                },
              })
            })
          }
        }, 100)
        // 获取商品详情
        client_get('products/' + that.pid).then(res => {
          that.proData = res;
          that.is_deliver = res.type === 'deliver';
          // console.log(that.proData)
          $(that.proData.specs).each(function (i, v) {
            v.isSelected = 'false';
          })
          that.proData.specs[0].isSelected = 'true';
          that.specsSelect = that.proData.specs[0];
          if (that.proData.ongoing_status == 'coming_soon' || that.proData.ongoing_status == 'offline_soon') {
            var time = 0;
            if (that.proData.ongoing_status == 'coming_soon') {
              that.proData.start_time = that.proData.start_time.replace(/-/g, '/');
              time = new Date(that.proData.start_time).getTime() - new Date().getTime();
            } else if (that.proData.ongoing_status == 'offline_soon') {
              that.proData.end_time = that.proData.end_time.replace(/-/g, '/');
              time = new Date(that.proData.end_time).getTime() - new Date().getTime();
            }
            var dd = 0, hh = 0, mm = 0, ss = 0;
            if (time > 0) {
              dd = Math.floor(time / 1000 / 60 / 60 / 24);
              hh = Math.floor((time / 1000 / 60 / 60) % 24);
              mm = Math.floor((time / 1000 / 60) % 60);
              ss = Math.floor((time / 1000) % 60);
              /*if(0<=dd && dd<10){ dd='0'+dd }else */
              if (dd < 0) {
                dd = 0
              }
              /*if(0<=hh && hh<10){ hh='0'+hh }else */
              if (hh < 0) {
                hh = 0
              }
              /*if(0<=mm && mm<10){ mm='0'+mm }else */
              if (mm < 0) {
                mm = 0
              }
              /*if(0<=ss && ss<10){ ss='0'+ss }else */
              if (ss < 0) {
                ss = 0
              }
            }
            that.showTime = {'time': time, 'dd': dd, 'hh': hh, 'mm': mm, 'ss': ss};
            that.getTimeList();
          }
          ready1 = true;
        })
        // 查询推荐商品
        common_get('product_recommend?product_id=' + that.pid).then(res => {
          that.tuijiandata = res;
          console.log(res);
          ready2 = true;
        })

      },
      changeSelect: function (id) {
        var that = this;
        if (that.specsSelect.id != id) {
          $(that.proData.specs).each(function (i, v) {
            v.isSelected = 'false';
            if (v.id == id) {
              v.isSelected = 'true';
              that.specsSelect = v;
            }
          })
        }
      },
      gobuy: function () {
        var that = this;
        layer.closeAll();
        if (that.proData.ongoing_status == 'coming_soon') {
          layer.msg('商品待开抢,请稍后');
          return false
        }
        if (that.proData.ongoing_status == 'expired') {
          layer.msg('商品已下架');
          return false
        }
        var user_info = JSON.parse(getCookie("user_info"));
        if (!user_info) {
          that.opengologin();
        } else {
          var href = '';
          if (that.talent_id != '') {
            that.talent_id = getUrlParam("talent_id");
            href = './confirm.html?id=' + that.pid + '&talent_id=' + that.talent_id + '&specs_id=' + that.specsSelect.id
          } else {
            href = './confirm.html?id=' + that.pid + '&specs_id=' + that.specsSelect.id
          }
          window.location.href = href;
        }
      },
      opengologin: function () {
        var that = this;
        $('.pop.gologin').fadeIn(500);

      },
      closegologin: function () {
        var that = this;
        $('.pop.gologin').fadeOut(500);

      },
      gologin: function () {
        var that = this;
        $('.pop.gologin').fadeOut(500);
        setTimeout(() => {
          var sourceUrl = window.location.href;
          localStorage.setItem("login_source", JSON.stringify(sourceUrl));
          window.location.href = './login.html';
        }, 500)
      },
    }
  });
</script>
</html>